<template>
  <el-card shadow="hover">
    <v-chart class="chart" :option="option" autoresize />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, provide, computed, onMounted } from 'vue'

onMounted(() => {})

// 缓存仓库中的数据，防止切换其他菜单后表单中的数据丢失
// const chartData = computed(() => {
//   return store.chartData
// })

const option = ref({
  title: {
    text: '公司人员组成',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['空乘', '飞行员', '检票员', '安检员'],
  },
  series: [
    {
      name: '人数',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { name: '空乘', value: 100 },
        { name: '飞行员', value: 200 },
        { name: '检票员', value: 100 },
        { name: '安检员', value: 100 },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
